<template>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏：<input
      type="text"
      placeholder="请输入姓氏"
      v-model="user.firstName"
    /><br />
    名字：<input type="text" placeholder="请输入名字" v-model="user.lastName" />
  </fieldset>
  <fieldset>
    <legend>计算属性和监视的演示</legend>
    姓名：<input
      type="text"
      placeholder="请输入姓名"
      v-model="fullName1"
    /><br />
    姓名：<input
      type="text"
      placeholder="请输入姓名"
      v-model="fullName2"
    /><br />
    姓名：<input type="text" placeholder="请输入姓名" v-model="fullName3" />
  </fieldset>
</template>

<script lang='ts'>
import {
  defineComponent,
  reactive,
  computed,
  watch,
  ref,
  watchEffect,
} from "vue";
export default defineComponent({
  name: "App",
  setup() {
    //定义一个响应式对象
    const user = reactive({
      firstName: "东方",
      lastName: "不败",
    });

    //通过计算属性的方式，实现第一个姓名的显示
    //vue3中的计算属性
    //计算属性的函数中如果只传入一个回调函数，表示的是get（只读）

    //改变fullName1不影响firstName和lastName
    //返回的是ref类型对象
    const fullName1 = computed(() => {
      return user.firstName + "_" + user.lastName;
    });

    //改变fullName2firstName和lastName的值也改变
    const fullName2 = computed({
      get() {
        return user.firstName + "_" + user.lastName;
      },
      set(val: string) {
        const names = val.split("_");
        user.firstName = names[0];
        user.lastName = names[1];
      },
    });

    //监视--监视指定的数据
    const fullName3 = ref("");
    watch(
      user,
      ({ firstName, lastName }) => {
        fullName3.value = firstName + "_" + lastName;
      },
      { immediate: true, deep: true }
    );
    //immediate默认会执行一次watch,deep会深度监视

    //监视,不需要配置immediate，本身默认就会进行监视（默认执行一次）
    // watchEffect(() => {
    //   fullName3.value = user.firstName + "_" + user.lastName;
    // })

    //监视fullName3的数据，改变firstName和lastName
    watchEffect(() => {
      const names = fullName3.value.split("_");
      user.firstName = names[0];
      user.lastName = names[1];
    });

    //watch-----监视多个数据
    // watch([user.firstName,user.lastName,fullName3],()=> {
    //   //这里的代码没有执行，fullName3是响应式数据，但是user.firstName,user.lastName不是
    //   console.log("=======");
    // })
    //使用watch监视非响应式数据时，修改成以下
    /* 
    watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
    watch([() => user.firstName, () => user.lastName, fullName3], () => {
      console.log("=======");
    });

    return {
      user,
      fullName1,
      fullName2,
      fullName3,
    };
  },
});
</script>

<style>
</style>